<!DOCTYPE html>
<html lang="en">

<head>
    <title>排行榜</title>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">


    <style>
        body {
            padding-bottom: 50px;
        }

        .title-logo {
            margin-top: 10px;
            height: 120px;
            background: url(../../images/rank/title_logo.png) center center no-repeat;
            background-size: 6rem;
        }

        .title {
            width: 80%;
            line-height: 40px;
            text-align: center;
            font-size: .4rem;
            background: url(../../images/rank/title.png) center center no-repeat;
            background-size: 7.5rem;
            margin: 10px auto;
            position: relative;
        }


        .single {
            height: 150px;
            background: #15095e;
            display: flex;
            padding: 10px 0;
        }

        .single>div {
            flex: 1;
            text-align: center;
        }

        .clan-rank {
            padding-top: 35px;
            height: 120px;
        }

        .user-rank .second {
            text-align: center;
            flex: 1;
            background: url(../../images/rank/bg_second.png) center center no-repeat;
            background-size: 2.4rem
        }

        .user-rank .user-logo {
            width: 35px;
            margin-top: 45px;
            height: 35px;
        }

        .user-rank .first {
            text-align: center;
            flex: 1;
            background: url(../../images/rank/bg_first.png) center center no-repeat;
            background-size: 2.4rem;
        }

        .user-rank .third {
            text-align: center;
            flex: 1;
            background: url(../../images/rank/bg_third.png) center center no-repeat;
            background-size: 2.4rem;
        }

        .clan-rank img {
            width: 75px;
        }

        .clan-rank .second,
        .clan-rank .first,
        .clan-rank .third {
            position: relative;
        }

        .clan-rank .second .team-second {
            border: 3px solid #4fb6f4;
            border-radius: 100%;
            height: 75px;
        }

        .clan-rank .first .team-first {
            border: 3px solid #e0873c;
            border-radius: 100%;
            height: 75px;
            
        }

        .clan-rank .third .team-third {
            border: 3px solid #9dd16d;
            border-radius: 100%;
            height: 75px;
            
        }

        .clan-rank .second:before {
            display: block;
            content: '';
            height: 40px;
            width: 30px;
            position: absolute;
            background: url(../../images/rank/icon_team_second.png) center center no-repeat;
            background-size: 100%;
            left: 37%;
            top: -25px;
        }

        .clan-rank .first:before {
            display: block;
            content: '';
            height: 40px;
            width: 30px;
            position: absolute;
            background: url(../../images/rank/icon_team_first.png) center center no-repeat;
            background-size: 100%;
            left: 37%;
            top: -25px;
        }

        .clan-rank .third:before {
            display: block;
            content: '';
            height: 40px;
            width: 30px;
            position: absolute;
            background: url(../../images/rank/icon_team_third.png) center center no-repeat;
            background-size: 100%;
            left: 37%;
            top: -25px;
        }

        .win-rank .second:before {
            display: block;
            content: '';
            height: 40px;
            width: 30px;
            position: absolute;
            background: url(../../images/rank/icon_team_second.png) center center no-repeat;
            background-size: 100%;
            top: 11px;
        }

        .win-rank .first:before {
            display: block;
            content: '';
            height: 40px;
            width: 30px;
            position: absolute;
            background: url(../../images/rank/icon_team_first.png) center center no-repeat;
            background-size: 100%;
            top: 11px;
        }

        .win-rank .third:before {
            display: block;
            content: '';
            height: 40px;
            width: 30px;
            position: absolute;
            background: url(../../images/rank/icon_team_third.png) center center no-repeat;
            background-size: 100%;
            top: 11px;
        }

        .username,
        .gold {
            width: 62%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 20%;
            color: #fff;
            margin-top: 3px;
        }

        .money {
            font-size: .35rem;
        }

        .gold {
            margin-top: 2px;
        }

        .gold img {
            width: .35rem;
            vertical-align: middle;
        }

        .win-rank {
            background: #15095e;
        }

        .win-rank>div {
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #2A247F;
            position: relative;
            overflow: hidden;
        }

        .win-rank img {
            width: 40px;
            margin-left: 15%;
            vertical-align: middle;
        }

        .win-rank .winname {
            margin-left: 5px;
        }

        .win-rank .session {
            float: right;
            margin-right: 15px;
            color: #D0C7EF;
        }

        .win-rank .session .win-total {
            font-size: .5rem;
        }

        .last {
            padding-bottom: 20%;
        }

        .more {
            position: absolute;
            right: -10%;
            color: #D0D2F7;
        }

        .nav .rank span {
            color: #FFB400;
        }

        body {
            height: auto;
        }
        .clanImg{
            width: 75px;
            height: 75px;
        }
    </style>
</head>

<body>

    <div class="title-logo"></div>
    <div>
        <div class="title  ">单日玩家下注金额排行
            <a href="./singlePlayer_more.html" class="more">更多</a>
        </div>
        <div class="single user-rank">
            <div class="second">
                <!-- <img class="user-logo" src="../../images/rank/user-seconnd.png" alt="">
                <div class="username" style='color:#D3EAFF;'>JDDDDDDDDD</div>
                <div class="gold">
                    <img src="../../images/rank/gold.png" alt="">
                    <span class="money1" >800</span>
                </div> -->
            </div>
            <div class="first">
         
            </div>
            <div class="third">

            </div>
        </div>
    </div>

    <div>
        <div class="title  ">单日战队下注金额排行
            <a href="./clan_more.html" class="more">更多</a>
        </div>
        <div class="single clan-rank">
            <div class="second">
              
            </div>
            <div class="first">
            </div>
            <div class="third">
               
            </div>
        </div>
    </div>

    <!-- <div class="last">
        <div class="title ">战队获胜总场次排行 <a href="./winTotal_more.html" class="more">更多</a></div>
        <div class=" win-rank">
            <div class="first">
                <img class="team-first" src="../../images/rank/image_team_qg.png" alt="">
                <span class="winname">QG</span> 战队
                <span class="session">场次：<span class="win-total">100</span> </span>
                <div class="clear"></div>                
            </div>
            <div class="first">
                <img class="team-first" src="../../images/rank/image_team_qg.png" alt="">
                <span class="winname">QG</span> 战队
                <span class="session">场次：<span class="win-total">100</span> </span>
                <div class="clear"></div>
            </div>
            <div class="first">
                <img class="team-first" src="../../images/rank/image_team_qg.png" alt="">
                <span class="winname">QG</span> 战队
                <span class="session">场次：<span class="win-total">100</span> </span>
                <div class="clear"></div>                
            </div>
        </div>
    </div> -->


    <div class="nav">
        <a class="home" href="../home/home.html">
            <img src="../../images/nav/icon_home.png" alt="">
            <br>
            <span>首页</span>
        </a>
        <!-- <a><a href="">赛事</a></a> -->
        <a class="rank" href="../rank/rank_home.html">
            <img src="../../images/nav/icon_ranking_active.png" alt="">
            <br>
            <span>排行榜</span>
        </a>
        <a class="pay" href="../eSports/eSports.html">
            <img src="../../images/nav/icon_Pay.png" alt="">
            <br>
            <span href="">电子竞技</span>
        </a>
        <a class="personal" href="../personal/personal.html">
            <img src="../../images/nav/icon_user.png" alt="">
            <br>
            <span>个人中心</span>
        </a>
    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script>
        $(function () {

            //当日玩家排行榜
            $.post(todayUrl, (res) => {
                console.log(res)
                let obj = res.obj
                obj.forEach((item, index) => {
                    let con =
                        `
                <img class="user-logo" src=${item.fdUserName} alt="">
                <div class="username" style='color:#FFFBE2 ;'>${item.fdUserName}</div>
                <div class="gold">
                    <img src=../../images/rank/gold.png alt="">
                    <span class="money1">${item.fdBettingAmount}</span>
                </div>`
                    if (index == 0) {

                        $('.user-rank>div').eq('1').append(con)
                    } else if (index == 1) {

                        $('.user-rank>div').eq('0').append(con)
                    }
                    if (index == 2) {
                        $('.user-rank>div').eq('2').append(con)
                    }
                });

            })

            //当日战队排行榜
            $.post(todayClanUrl, (res) => {
                console.log(res)
                let obj = res.obj
                obj.forEach((item, index) => {
                    let con1=`<img  class="team-first clanImg" src=${item.fdRemark} alt="">
                <div class="">
                    <span class="clanname">${item.fdBettingWarName}</span> 战队</div>
                <div class="gold">
                    <img src="../../images/rank/gold.png" alt="">
                    <span class="money2">${item.fdBettingAmount}</span>
                </div>`
                    if (index == 0) {
               
                        $('.clan-rank .first img').attr('src', item.avatar)
                       $('.clan-rank> div').eq('1').append(con1)

                        $('.clan-rank .first').click(function () {
                            window.location.href =
                                `./clanInfo.html?clanName=${item.fdBettingWarId}`
                        })
                    } else if (index == 1) {
                        $('.clan-rank> div').eq('0').append(con1)
                        $('.clan-rank .second').click(function () {
                            window.location.href =
                                `./clanInfo.html?clanName=${item.fdBettingWarId}`
                        })
                    }
                    else if (index == 2) {
                        $('.clan-rank> div').eq('2').append(con1)
                        $('.clan-rank .third').click(function () {
                            window.location.href =
                                `./clanInfo.html?clanName=${item.fdBettingWarId}`
                        })
                    }
                });


            })
            //战队获胜总场次
            // $.post(allClanUrl, (res) => {
            //                 console.log(res)
            //                 let obj=res.obj
            //                 obj.forEach((item,index) => {
            //                     if(index==0){
            //                         $('.first .winname').text(item.clanName)
            //                         $('.first .win-total').text(item.total)
            //                     }
            //                     else if(index==1){
            //                         $('.second .winname').text(item.clanName)
            //                         $('.second .win-total').text(item.total)
            //                     }
            //                     if(index==2){
            //                         $('.third .winname').text(item.clanName)
            //                         $('.third .win-total').text(item.total)
            //                     }
            //                 });

            //             })
        })
    </script>
</body>

</html>